<template>
  <div id="view">
    <div class="header">
      <input type="file" id="file" />
      <span v-show="flag"> {{ this.index + 1 }}\{{ this.count }}</span>
      <button @click="openDoc">打开</button>
      <button @click="print">打印</button>
      <button @click="firstPage">首页</button>
      <button @click="addIndex">上页</button>
      <button @click="subIndex">下页</button>
      <button @click="lastPage">尾页</button>
      <button @click="rotateTrue">顺时针旋转90度</button>
      <button @click="rotateFalse">逆时针旋转90度</button>
      <button @click="big">放大0.25</button>
      <button @click="small">缩小0.25</button>
    </div>
    <div v-for="(item, index) in count" :key="index" class="contain">
      <canvas width="900px" height="1200px"></canvas>
    </div>
  </div>
</template>

<script>
import "./js/html";
import "./js/swasm";
const g = window.SWOFD;
export default {
  name: "shuke",
  created() {
    console.log(this.dom);
    this.canvas = document.getElementsByTagName("canvas")[0];
    console.log("created");
    console.log(this);
    let thisa = this;
    window.onscroll = function () {
      if (document.documentElement.scrollTop < 300) {
        thisa.index = 0;
      }
      let divPositions = document.getElementsByTagName("div");
      if (
        document.documentElement.scrollTop >
        0.85 * divPositions[thisa.index + 4].offsetTop
      ) {
        thisa.continueNext();
      }
      if (document.documentElement.scrollTop < 300) {
        thisa.index = 0;
      }
      console.log(thisa.index);
    };
  },
  watch: {
    /* rotate:function(){
        this.paint(); 
    } */
  },
  data() {
    return {
      doc: "",
      count: "",
      page: "",
      index: 0,
      file: "",
      rotate: 0,
      dpi: 96,
      flag: false,
      canvas: "",
      dom: "",
      doma: "",
      domb: "",
      count1: "",
    };
  },
  methods: {
    async openDoc() {
      this.file = document.getElementById("file").files[0];
      this.doc = await g.open(this.file);
      this.count = this.doc.pageCount;
      this.paint();
    },
    async paint() {
      if (this.doc == "") {
        alert("您还未选择文件");
      } else {
        this.flag = true;
        console.log("已选择文件");
        this.page = await this.doc.pageAt(this.index);
        console.log(this.page);
        this.dom = document.getElementsByTagName("div")[this.index + 3];
        if (this.page) {
          await this.page.paint(this.dom, {
            dpi: this.dpi,
            selectText: false,
            rotate: this.rotate,
          });
        } else {
        }
      }
      for (let a = 0; a <= this.count; a++) {
        document.getElementsByTagName("canvas")[a].style.position = "relative";
      }
    },
    print() {
      this.doc.printPage([0, 1, 2, 3, 4]);
      console.log("打印");
    },
    subIndex() {
      if (this.index < this.count - 1) {
        this.index++;
      }
      window.scrollTo(
        0,
        document.getElementsByTagName("div")[this.index + 3].offsetTop
      );
      this.paint();
    },
    addIndex() {
      if (this.index > 0) {
        this.index--;
      }
      window.scrollTo(
        0,
        document.getElementsByTagName("div")[this.index + 3].offsetTop
      );
      this.paint();
    },
    rotateTrue() {
      this.rotate += 90;
      this.paint();
    },
    rotateFalse() {
      this.rotate -= 90;
      this.paint();
    },
    firstPage() {
      this.index = 0;
      window.scrollTo(0, document.getElementsByTagName("div")[3].offsetTop);
      this.paint();
    },
    lastPage() {
      this.index = this.count - 1;
      window.scrollTo(0, document.body.scrollHeight);
      this.paint();
    },
    big() {
      this.dpi = this.dpi * 1.25;
      this.paint();
    },
    small() {
      this.dpi = this.dpi * 0.75;
      this.paint();
    },
    continueNext() {
      if (this.index < this.count - 1) {
        this.index++;
      }
      this.paint();
    },
  },
};
</script>

<style>
.header {
  z-index: 99;
  position: fixed;
  height: 50px;
  margin: 0px 300px;
}
div.contain {
  position: relative;
}
</style>